<!-- Good be like is a Requirement Statistics Project table -->
<template>
  <el-dialog v-model="dialogFormVisible" :title="dialogTitle" width="800px" class="dialog-add-headcount" destroy-on-close draggable>
    <el-form ref="ruleFormRef" :model="form" label-width="100px">
      <el-form-item label="项目">
        <el-select disabled v-model="form.projectId" placeholder="请选择项目" style="width: 100%"> <el-option v-for="item in projectList" :key="item.code" :label="`${item.code}-${item.cname}`" :value="item.id" /> </el-select>
      </el-form-item>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="时间段" prop="timeSlot">
            <el-date-picker disabled v-model="form.timeSlot" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="工序">
            <el-input v-model="form.processName" disabled />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="计划" prop="weekPlanNum">
            <el-input v-model="form.weekPlanNum" style="width: 100px" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="实际" prop="weekFinishNum">
            <el-input v-model="form.weekFinishNum" style="width: 100px" disabled />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="计划内容" prop="weekPlanRemark">
            <el-input v-model="form.weekPlanRemark" type="textarea" class="no-resize" disabled :rows="4" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="完成内容" prop="weekFinishRemark">
            <el-input v-model="form.weekFinishRemark" type="textarea" class="no-resize" disabled :rows="4" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="本周进度说明" prop="weekRemark">
            <el-input v-model="form.weekRemark" type="textarea" class="no-resize" disabled :rows="4" />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="本月进度说明" prop="monthRemark">
            <el-input v-model="form.monthRemark" type="textarea" class="no-resize" disabled :rows="4" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="单月计划" prop="monthPlanRemark">
            <el-input v-model="form.monthPlanRemark" type="textarea" class="no-resize" disabled :rows="4" />
          </el-form-item>
        </el-col>

        <el-col :span="12"> </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="handleClickBtnClose">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useUsersStore, useProjectssStore } from '../../stores'

const dialogFormVisible = ref(false)
const dialogTitle = ref('')
const emits = defineEmits(['submited'])
// const deptProps = ref({ label: 'deptName', value: 'deptId' })
// const deptList = ref(useDeptStore().getAllState())
const projectssStore = useProjectssStore()
const projectList = ref<Array<{ id: number; code: string; cname: string }>>(projectssStore.getAllState() as any)
// const weeks = ref<{ start: Date; end: Date }[]>([])
const startDate = ref('')
const endDate = ref('')
const form = reactive({
  id: null,
  colId: -1,
  projectId: 0,
  processId: 0,
  processName: '',
  projectCode: '',
  projectName: '',
  weekStartDate: '',
  weekEndDate: '',
  deptIds: [] as number[],
  deptId: -1,
  deptName: '',
  userNum: 0,
  weekPlanNum: null,
  weekFinishNum: null,
  weekPlanRemark: '',
  weekFinishRemark: '',
  weekRemark: '',
  monthRemark: '',
  monthPlanRemark: '',
  createBy: useUsersStore().user.username,
  timeSlot: [] as Date[],
})

const openDialog = (val: any) => {
  const { weekStartDate, weekEndDate, processId, processName, projectId, projectCode, projectName, colId, weekPlanNum, weekFinishNum, weekPlanRemark, weekFinishRemark, weekRemark, monthRemark, monthPlanRemark } = val

  startDate.value = weekStartDate
  endDate.value = weekEndDate

  form.colId = colId
  form.processId = processId
  form.processName = processName
  form.weekPlanNum = weekPlanNum
  form.weekFinishNum = weekFinishNum
  form.projectId = projectId
  form.projectCode = projectCode
  form.projectName = projectName
  form.weekPlanRemark = weekPlanRemark
  form.weekFinishRemark = weekFinishRemark
  form.weekRemark = weekRemark
  form.monthRemark = monthRemark
  form.monthPlanRemark = monthPlanRemark
  // form.deptIds = [...arrFromA, deptId]
  form.timeSlot = [weekStartDate, weekEndDate]
  dialogFormVisible.value = true
  dialogTitle.value = '项目计划详细信息'
}

const handleClickBtnClose = () => {
  dialogFormVisible.value = false
}

defineExpose({
  openDialog,
})
</script>
<style lang="scss" scoped></style>
